<template>
  <!-- 后台管理整个父组件 -->
  <div class="home">
    <section class="operation">
      <!-- 左侧导航栏 -->
      <div class="sidebar-container">
        <CustomSidebarNav
          :active-index="currentActiveIndex"
          @menu-select="handleMenuSelect"
        />
      </div>
      <!-- 右侧内容区域 -->
      <div class="content-container">
        <component
          :is="rightcom"
          :currentproperties="currentproperties"
          @componenmanagement="componenmanagement"
        />
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "admin",
  inject: ["reload"],
  components: {},
  data() {
    return {
      //当前显示的组件名称
      rightcom: "moduleIndex",
      currentproperties: {},
      pageComponents: [], //页面组件
      // 当前活动的菜单索引，用于高亮显示
      currentActiveIndex: "1", // 默认选中"模块"菜单项
    };
  },

  mounted() {
    // this.pageSetup.name = "页面标题";
    // this.currentproperties = this.pageSetup;
  },

  methods: {
    // 处理菜单选择事件
    handleMenuSelect(obj) {
      // 更新当前活动的菜单索引，这样导航栏中对应的菜单项就会显示背景色
      this.currentActiveIndex = obj.index;
      // 切换右侧页面组件
      this.rightcom = obj.componentName;
      // 这里可以添加其他处理逻辑，比如页面跳转、加载内容等
      console.log("左侧导航栏点击回调", obj, this.rightcom);
    },
    /**
     * 切换组件位置
     *
     * @param {Object} res 组件切换后返回的位置
     */
    componenmanagement(res) {
      this.pageComponents = res;
    },
  },

  watch: {
    /* 监听右侧属性设置切换 */
    rightcom(newval) {
      if (newval === "decorate") {
        utils.forEach(this.pageComponents, (res) => {
          /* 修改选中 */
          if (res.active === true) res.active = false;
        });
        this.currentproperties = this.pageSetup;
        return;
      }
      if (newval === "componenmanagement") {
        /* 替换 */
        utils.forEach(this.pageComponents, (res) => {
          /* 修改选中 */
          if (res.active === true) res.active = false;
        });
        this.currentproperties = this.pageComponents;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;

  /* 操作主体 */
  .operation {
    width: 100%;
    height: calc(100vh - 0px);
    display: flex;
    flex-direction: row;
    padding-top: 10px;
    // 左侧导航栏容器样式
    .sidebar-container {
      height: 100%;
      flex-shrink: 0;
    }
    // 右侧内容区域容器样式
    .content-container {
      height: 100%;
      flex: 1;
      width: 85%;
      padding-top: 5px;
      padding-left: 10px;
      box-sizing: border-box;
    }

    // 调整其他元素的宽度以适应新的侧边栏
    .phone {
      flex: 1;
      height: 100%;
      // overflow-y: scroll;
      display: flex;
      justify-content: center;
      background: #f7f8fa;
      &::-webkit-scrollbar {
        width: 1px;
      }
      // &::-webkit-scrollbar-thumb {
      //   background-color: #155bd4;
      // }

      /* 手机样式 */
      .phoneAll {
        width: 375px;
        height: 400px;
        height: calc(100vh - 250px);
        overflow: scroll;
        &::-webkit-scrollbar {
          //隐藏原生滚动轴
          width: 1px;
        }
        // min-height: 760px;
        box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
        margin: 15px 0 0 0;
        position: relative;
        padding-bottom: 50px;

        /* 手机高度 */
        .phoneSize {
          position: absolute;
          left: -137px;
          top: 640px;
          font-size: 12px;
          color: #a2a2a2;
          border-bottom: 1px solid #dedede;
          width: 130px;
          height: 21px;
          line-height: 21px;
        }
        .phoneBottom {
          border: 3px solid red;
          margin-top: -30px;

          // position: absolute;
          // left: -137px;
          // top: 660px;
          // font-size: 12px;
          // color: #a2a2a2;
          // border-bottom: 1px solid #dedede;
          // width: 130px;
          // height: 21px;
          // line-height: 21px;
        }

        /* 状态栏 */
        .statusBar {
          width: 100%;
          display: block;
        }

        /* 主体内容 */
        .phone-container {
          min-height: 367px;
          box-sizing: border-box;
          cursor: pointer;
          width: 100%;
          position: relative;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .componentsClass {
            border: 1px solid #fff;
            &:hover {
              border: 1px dashed #155bd4;
            }
          }
        }
      }
    }
  }
}
</style>
